import React, { Component } from 'react'
import style from './login.module.scss';
import ReactSimpleVerify from 'react-simple-verify'
import 'react-simple-verify/dist/react-simple-verify.css'
import { Toast } from 'antd-mobile';
import { connect } from 'react-redux'
import { changeUserInfoAction, changeIsLoginAction } from '@/store/modules/User/userActiveCreate.js'

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            phone: '',
            isShowSlider: false,//是否显示滑块
            getCodeTxt: '获取验证码',
            isClickCode: true,//点击获取验证码是否有效
            codeTxt: '',
            timeFn: ''
        }
    }
    componentDidMount() {
        if (this.props.islogin) {
            this.props.history.push('/home')
        }
    }
    render() {
        return (
            <div className={style.contentBox}>
                <div className={style.imgBox}>
                    <img className={style.loginLogo} src={require('@/static/imges/loginLogo.png')} alt="" />
                </div>
                <div className={style.fromBox}>
                    <div className={style.inputBox}>
                        <input className={style.inputDom} type="tel" placeholder="手机号" maxLength='11' onChange={(e) => { this.setState({ phone: e.target.value }) }} value={this.state.phone}></input>
                        <button className={style.getVerificationCode} onClick={this.getVerificationCodeFn}>{this.state.getCodeTxt}</button>
                    </div>
                    <div className={style.inputBox}>
                        <input className={style.inputDom} type="text" value={this.state.codeTxt} onChange={(e) => { this.setState({ codeTxt: e.target.value }) }} placeholder="验证码"></input>
                    </div>
                </div>
                {this.state.isShowSlider ? (
                    <div className={style.slideBox}>
                        <ReactSimpleVerify
                            ref="verify"
                            success={() => { this.getCodeFn() }}
                            width={300}
                            tips='向右滑动验证'
                            borderRadius='2'
                        />
                        {/* <button onClick={this.reset}>重置</button> */}
                    </div>
                ) : ''}
                <p className={style.beCareful}> 新用户登录即自动注册，并表示已同意
                    <a className={style.jumpUrl} href="//h5.ele.me/service/agreement/#initTitle=%E7%94%A8%E6%88%B7%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE&amp;key=ruleQue18">《用户服务协议》</a>
                    和
                    <a className={style.jumpUrl} href="http://terms.alicdn.com/legal-agreement/terms/suit_bu1_other/suit_bu1_other201903051859_43484.html">《隐私权政策》</a>
                </p>
                <button className={style.loginBtn} onClick={this.loginTypeChange}>登录</button>
                <p className={style.aboutUs}>关于我们</p>
            </div>
        )
    }
    getVerificationCodeFn = () => {
        if ((/^1[3456789]\d{9}$/.test(this.state.phone))) {
            if (!this.state.isClickCode) return;
            this.setState({
                isShowSlider: true
            })
        } else {
            Toast.offline('手机号格式错误', 1.5)
        }
    }
    reset = () => {
        const $verify = this.refs.verify
        $verify.reset()
        this.setState({
            isPass: false
        })
    }
    getCodeFn = () => {
        Toast.success('验证码发送成功', 1.5)
        this.setState({
            isClickCode: false,
            getCodeTxt: 60
        })
        setTimeout(() => {
            this.setState({
                isShowSlider: false,
            })
        }, 100)
        this.setState({
            timeFn: setInterval(() => {
                this.setState({
                    getCodeTxt: this.state.getCodeTxt - 1
                })
                if (this.state.getCodeTxt <= 0) {
                    this.setState({
                        getCodeTxt: '获取验证码',
                        isClickCode: true,
                    })
                    clearInterval(this.state.timeFn)
                }
            }, 1000)
        })
    }
    loginTypeChange = () => {
        if (!(/^1[3456789]\d{9}$/.test(this.state.phone))) {
            Toast.offline('手机号格式错误', 1.5);
            return
        }
        if (this.state.codeTxt.trim() === '') {
            Toast.offline('验证码不允许为空', 1.5);
            return
        }
        this.props.changeUserInfoFn({ phone: this.state.phone, code: this.state.codeTxt })
        this.props.changeLoginTypeFn(true)
        Toast.success('登陆成功', 2, () => {
            this.props.history.push('/home')
        });
    }
    componentWillUnmount() {
        clearTimeout(this.state.timeFn);
    }
}

const stateToProps = (state) => {
    return {
        islogin: state.user.isLogin
    }
}

const dispatchToProps = (dispatch) => {
    return {
        changeUserInfoFn: (value) => {//修改用户信息
            let action = value;
            dispatch(changeUserInfoAction(action))
        },
        changeLoginTypeFn: (value) => {//修改登录状态
            let action = value;
            dispatch(changeIsLoginAction(action))
        }
    }
}


export default connect(stateToProps, dispatchToProps)(Login)
